import React, { useState } from 'react';
import { Layout, Breadcrumb, Card, Table, Button, Modal, Form, Input, message, Popconfirm } from 'antd';
import { Content } from 'antd/es/layout/layout';
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';

const Contacts = () => {
  const [contacts, setContacts] = useState([
    { id: 1, name: '张三', position: '供应商', phone: '13800138001', email: 'zhangsan@example.com' },
    { id: 2, name: '李四', position: '客户经理', phone: '13800138002', email: 'lisi@example.com' },
    { id: 3, name: '王五', position: '合作伙伴', phone: '13800138003', email: 'wangwu@example.com' },
  ]);

  const [isModalVisible, setIsModalVisible] = useState(false);
  const [editingContact, setEditingContact] = useState<any>(null);
  const [form] = Form.useForm();

  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '职位',
      dataIndex: 'position',
      key: 'position',
    },
    {
      title: '电话',
      dataIndex: 'phone',
      key: 'phone',
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      key: 'email',
    },
    {
      title: '操作',
      key: 'action',
      render: (_: any, record: any) => (
        <>
          <Button 
            type="link" 
            icon={<EditOutlined />}
            onClick={() => handleEdit(record)}
          >
            编辑
          </Button>
          <Popconfirm
            title="确定删除此联系人吗？"
            onConfirm={() => handleDelete(record.id)}
            okText="确定"
            cancelText="取消"
          >
            <Button type="link" danger icon={<DeleteOutlined />}>删除</Button>
          </Popconfirm>
        </>
      ),
    },
  ];

  const showModal = () => {
    setEditingContact(null);
    form.resetFields();
    setIsModalVisible(true);
  };

  const handleEdit = (record: any) => {
    setEditingContact(record);
    form.setFieldsValue(record);
    setIsModalVisible(true);
  };

  const handleDelete = (id: number) => {
    setContacts(contacts.filter(contact => contact.id !== id));
    message.success('联系人删除成功！');
  };

  const handleOk = () => {
    form.validateFields().then(values => {
      if (editingContact) {
        // 编辑联系人
        setContacts(contacts.map(contact => 
          contact.id === editingContact.id 
            ? { ...values, id: editingContact.id } 
            : contact
        ));
        message.success('联系人更新成功！');
      } else {
        // 新增联系人
        const newContact = {
          id: contacts.length > 0 ? Math.max(...contacts.map(c => c.id)) + 1 : 1,
          ...values
        };
        setContacts([...contacts, newContact]);
        message.success('联系人添加成功！');
      }
      form.resetFields();
      setIsModalVisible(false);
    });
  };

  const handleCancel = () => {
    form.resetFields();
    setIsModalVisible(false);
  };

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Layout className="site-layout">
        <Content style={{ margin: '16px' }}>
          <Breadcrumb style={{ margin: '16px 0' }}>
            <Breadcrumb.Item>联系人管理</Breadcrumb.Item>
          </Breadcrumb>
          <div className="site-layout-background" style={{ padding: 24, minHeight: 360, background: '#fff' }}>
            <Card 
              title="联系人列表" 
              bordered={false}
              extra={
                <Button 
                  type="primary" 
                  icon={<PlusOutlined />} 
                  onClick={showModal}
                >
                  添加联系人
                </Button>
              }
            >
              <Table dataSource={contacts} columns={columns} pagination={{ pageSize: 5 }} />
            </Card>
          </div>
        </Content>
      </Layout>

      <Modal
        title={editingContact ? "编辑联系人" : "添加联系人"}
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
        okText="确认"
        cancelText="取消"
      >
        <Form form={form} layout="vertical">
          <Form.Item
            name="name"
            label="姓名"
            rules={[{ required: true, message: '请输入姓名!' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="position"
            label="职位"
            rules={[{ required: true, message: '请输入职位!' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="phone"
            label="电话"
            rules={[{ required: true, message: '请输入电话号码!' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="email"
            label="邮箱"
            rules={[{ required: true, message: '请输入邮箱地址!' }]}
          >
            <Input />
          </Form.Item>
        </Form>
      </Modal>
    </Layout>
  );
};

export default Contacts;